$(function () {
    var userFlag = false
    var pwdFlag = false
    var yzmFlag = false
    var oForm = document.querySelector('form')
    var userId;

    //输入账号用正则判断账号输入是否合法
    oForm.name.oninput = function () {
        //手机号正则
        var regName = /^[1][3,4,5,7,8][0-9]{9}$/
        //邮箱正则
        var regEmail = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
        var str = this.value.trim()
        userId = str
        // 当输入的是手机号或者邮箱时 为true
        if (regName.test(str) || regEmail.test(str)) {
            userFlag = true
        } else {
            userFlag = false
        }
    }
    //输入密码用正则判断密码是否为6-18位且有字母或下划线
    oForm.pwd.oninput = function () {
        var regPwd = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$/
        var str = this.value.trim()
        pwdFlag = regPwd.test(str)
    }

    
    function randomNumber(n, m) {
        var max = n > m ? n : m;
        var min = n < m ? n : m;
        return parseInt(Math.random() * (max - min + 1)) + min
    }

    //产生随机的数字和大小写字母 函数
    function randomCode(n) {
        var str = '';
        for (var i = 0; i < n; i++) {
            if (Math.random() > 0.5) {
                str += randomNumber(0, 9)
            } else {
                str += String.fromCharCode(randomNumber(97, 122));
            }
        }
        return str;
    }
    var yzmNum
    //点击切换验证码
    $('.reyzm').on('click', function () {
        yzmNum = randomCode(4)
        $('.yzm').text(yzmNum)
    })
    //页面加载就触发一次验证码
    $('.reyzm').triggerHandler('click')


    //输入验证码判断与验证码的框是否一致
    oForm.YZM.oninput = function () {
        var str = this.value.trim()
        if (str == yzmNum) {
            yzmFlag = true
        }

    }

    //提交表单
    $('form').on('submit', function () {
        //判断是否能够通过
        if (!userFlag) {
            layer.tips('请正确输入手机号或邮箱', '#uname')
            return false
        }
        if(!pwdFlag){
            layer.tips('请正确输入密码格式','#pwd')
            return false
        }
        if (!yzmFlag) {
            layer.tips('验证码错误', '#yzm')
            $('.reyzm').triggerHandler('click')
            return false
        }
        //用seriakize()拿去输入框输入的内容
        var data = $('form').serialize()
        console.log(data);
        $.ajax({
            url: "/login",
            type: "post",
            data: data
        }).then(function (res) {
            console.log(res);
            //结构解析 拿到code, msg, data
            let { code, msg, data } = res;
            if (code == 200) {
                //状态码为200 登录成功 把数据上传到localStorage
                localStorage.setItem('userInfo', JSON.stringify(data));
                layer.confirm('登录成功,是否立即跳转?', {
                    btn: ['是', '否']
                }, (index) => {

                    layer.close(index)
                    //跳转到主页
                    location.href = "./index.html"
                }, () => {
                    //取消则在登录页面 给出提示
                    layer.msg(`欢迎${userId}登录!`)
                })
            } else {
                //登录失败 提醒用户检查
                layer.msg(`${msg},请检查用户密码是否输入正确`)
            }
        })

        return false
    })

    

})